<template>
  <h3>组件的生命周期</h3>
  <p>{{ msg }}</p>
  <button @click="updateHeader">更新一下</button>
</template>

<script>
/**
 * 生命周期函数：
 *      创建期：beforeCreate  created
 *      挂载期：beforMount   mounted
 *      更新期：beforeUpdate updated
 *      销毁期: beforeUnmount unmounted
 */
export default {
  data() {
    return {
      msg: '更新之前'
    }
  }
  , methods: {
    updateHeader() {
      this.msg = '更新后'
    }
  }
  , beforeCreate() {
    console.log('组件创建之前');

  }
  , created() {
    console.log('组件创建之后');

  }
  , beforMount() {
    console.log('组件渲染之前');

  }
  , mounted() {
    console.log('组件渲染之后');

  }
  , beforeUpdate() {
    console.log('组件更新之前');
  }
  , updated() {
    console.log('组件更新之后');

  }
  , beforeUnmount() {
    console.log('组件销毁之前');

  }
  , unmounted() {

  }
}
</script>